<template>
    <el-table :data="list">
        <el-table-column prop="name" label="商品名称" />
        <el-table-column prop="description" label="描述" />
    </el-table>
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="pageSizeChangeHandle"
        @current-change="pageChangeHandle" />
</template>
<script setup lang='ts'>

import { getProductListAPI } from "./api"
import { reactive } from "vue"
import useTable from "@/hocks/useTable"

const form = reactive({
    keyword: "",

})

const {
    list,
    total,
    pageNum,
    pageSize,
    pageChangeHandle,
    pageSizeChangeHandle, } = useTable(getProductListAPI, form)

</script>
<style lang="less" scoped>

</style>